<template>
    <!-- 详情页底部动作栏 -->
    <van-action-bar placeholder>
        <van-action-bar-icon to="/cart" icon="cart-o" text="购物车" :badge="badge" />
        <van-action-bar-button @click="addCartFn" type="warning" text="加入购物车" />
        <van-action-bar-button @click="buyFn" type="danger" text="立即购买" />
    </van-action-bar>
</template>
<script lang='ts' setup>
import { ref } from 'vue';
// 引入函数形式的组件
import { Toast } from 'vant'
// 引入用户数据管理仓库
import { useUserStore } from '@/stores/userStore'
// 引入加入购物车接口
import { addcart } from '@/api/detailsapi'
// 引入查看购物车的接口
import { cartlist } from '@/api/cartapi'
const badge = ref<number>(0)
// 定义用户管理仓库的实例
const userStore = useUserStore()
// 父传子
const props = defineProps<{
    id: string
}>()
// 点击加入购物车按钮
const addCartFn = () => {
    addcart({ userid: userStore.userId, proid: props.id, num: '1' }).then((res: any) => {
        if (res.code == 200) {
            // console.log('加入购物车', res);
            // 查看购物车，重新渲染购物车商品数量
            cartCountFn()
            Toast('加入购物车啦，你又要消费啦！！！')
        }

    })
}
// 点击立即购买
const buyFn = () => {
    Toast('即将进入支付页面')
}
const cartCountFn = () => {
    // 调用查看购物车的接口
    cartlist({ userid: userStore.userId }).then((res: any) => {
        // console.log('查看购物车', res);
        badge.value = res.data.length
    })
}
cartCountFn()

</script>
<style scoped>

</style>

